<template>
  <div class="app-container">
    <!-- 头部搜索 -->
    <el-row style="display: flex; align-items: center; margin: 20px">
      <el-col :span="24">
        <el-tabs v-model="activeTab" @tab-click="handleClick" type="border-card">
          <el-tab-pane label="基于单节点数据微扰动的抗IP社会归属识别" name="first" :key="'first'">
            <Graph v-if="isFirst" :lineDash="[0, 0]" :graphData="graphData" :total="total" :activeTab="activeTab"
              @changePage="changePage" />
          </el-tab-pane>
          <el-tab-pane label="基于数据混淆的IP社会归属知识图谱分析降效" name="second" :key="'second'">
            <Graph2 v-if="isSecond" :lineDash="[5, 5]" :graphData="graphData" :total="total" :activeTab="activeTab"
              @changePage="changePage" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import G6 from "@antv/g6";
import Graph from "./graph.vue";
import Graph2 from "./graph2.vue";

import {
  riskPageQuery,
  predictRelationship,
} from "@/api/IPOwnershipProtection/dataStatistics.js";
export default {
  components: { Graph,Graph2 },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      select: "1",
      nodeTotal: 0,
      linkTotal: 0,
      inputValue: "",
      graph: null,
      graphData: {
        nodes: [],
        edges: [],
      },
      currentNode: null,
      activeTab: "first",
      isFirst: true,
      isSecond: false,
      total: 0,
    };
  },
  created() { },
  mounted() {
    this.getriskPageQuery();
  },
  beforeUnmount() { },
  methods: {
    // 切换tab
    handleClick(tab) {
      this.graphData = {
        nodes: [],
        edges: [],
      }
      this.total = 0
      if (tab.name === "first") {
        this.isFirst = true;
        this.isSecond = false;
        this.getriskPageQuery();
      } else if (tab.name === "second") {
        this.isFirst = false;
        this.isSecond = true;
        this.getpredictRelationship();
      }
    },
    // 获取确定数据
    getriskPageQuery() {
      riskPageQuery(this.queryParams).then((res) => {
        let nodes = [];
        let edges = [];
        this.total = res.data.totalElements
        res.data.content.map((ele) => {
          nodes.push({
            id: String(ele.address),
            label: ele.address,
            params: { ip: ele.address, type: "", flag: true, city: ele.city, domain: ele.domain, org: ele.org, ipc: ele.ipc },
          });
          if (ele?.city?.name) {
            nodes.push({
              id: String(ele?.city?.name),
              label: ele?.city?.name,
              params: { ip: ele.address, type: "city" },
            });
          }
          if (ele?.domain?.name) {
            nodes.push({
              id: String(ele?.domain?.name),
              label: ele?.domain?.name,
              params: { ip: ele.address, type: "domain" },
            });
          }
          if (ele?.org?.name) {
            nodes.push({
              id: String(ele?.org?.name),
              label: ele?.org?.name,
              params: { ip: ele.address, type: "org" },
            });
          }
          if (ele.ipc) {
            ele.ipc.map((aa) => {
              if (aa?.name) {
                nodes.push({
                  id: String(aa.name),
                  label: aa.name,
                  params: { ip: ele.address, type: "ipc" },
                });
              }
            });
          }
          if (ele.city?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.city?.name),
              label: "城市",
              params: { from: ele, to: ele.city }
            });
          }
          if (ele.domain?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.domain?.name),
              label: "域名",
              params: { from: ele, to: ele.domain }
            });
          }
          if (ele.org?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.org?.name),
              label: "组织",
              params: { from: ele, to: ele.org }
            });
          }
          if (ele.ipc) {
            ele.ipc.map((ee, i) => {
              if (ee?.name) {
                edges.push({
                  source: String(ele.address),
                  target: String(ee.name),
                  label: "ipc",
                  params: { from: ele, to: ele.ipc[i] }
                });
              }
            });
          }
        });
        const nodesIds = new Set();
        this.graphData.nodes = nodes.filter((item) => {
          if (nodesIds.has(item.id)) {
            return false;
          }
          nodesIds.add(item.id);
          return true;
        });
        this.graphData.edges = edges;
      });
    },
    // 获取预测数据
    getpredictRelationship() {
      predictRelationship(this.queryParams).then((res) => {
        let nodes = [];
        let edges = [];
        this.total = res.data.totalElements
        res.data.content.map((ele) => {
          nodes.push({
            id: String(ele.address),
            label: ele.address,
            params: { ip: ele.address, type: "", flag: true, city: ele.city, domain: ele.domain, org: ele.org, ipc: ele.ipc },
          });
          if (ele?.city?.name) {
            nodes.push({
              id: String(ele?.city?.name),
              label: ele?.city?.name,
              params: { ip: ele.address, type: "city" },
            });
          }
          if (ele?.domain?.name) {
            nodes.push({
              id: String(ele?.domain?.name),
              label: ele?.domain?.name,
              params: { ip: ele.address, type: "domain" },
            });
          }
          if (ele?.org?.name) {
            nodes.push({
              id: String(ele?.org?.name),
              label: ele?.org?.name,
              params: { ip: ele.address, type: "org" },
            });
          }
          if (ele.ipc) {
            ele.ipc.map((aa) => {
              if (aa?.name) {
                nodes.push({
                  id: String(aa.name),
                  label: aa.name,
                  params: { ip: ele.address, type: "ipc" },
                });
              }
            });
          }
          if (ele.city?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.city?.name),
              label: "城市",
              params: { from: ele, to: ele.city }
            });
          }
          if (ele.domain?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.domain?.name),
              label: "域名",
              params: { from: ele, to: ele.domain }
            });
          }
          if (ele.org?.name) {
            edges.push({
              source: String(ele.address),
              target: String(ele.org?.name),
              label: "组织",
              params: { from: ele, to: ele.org }
            });
          }
          if (ele.ipc) {
            ele.ipc.map((ee, i) => {
              if (ee?.name) {
                edges.push({
                  source: String(ele.address),
                  target: String(ee.name),
                  label: "ipc",
                  params: { from: ele, to: ele.ipc[i] }
                });
              }
            });
          }
        });
        const nodesIds = new Set();
        this.graphData.nodes = nodes.filter((item) => {
          if (nodesIds.has(item.id)) {
            return false;
          }
          nodesIds.add(item.id);
          return true;
        });
        this.graphData.edges = edges;
      });
    },
    // 分页
    changePage(params) {
      this.queryParams = params
      this.getriskPageQuery()
    }
  },
};
</script>

<style lang="scss" scoped></style>
